<template>
  <div id="addContent" class="container">
    <div>
      <h3 class="title"><span />编辑内容</h3>
      <el-button size="small" icon="el-icon-arrow-left" type="primary" class="back" @click="prev">返回</el-button>
    </div>
    <el-card shadow="never" class="card">
      <!-- card body -->
      <div class="search">
        <el-form :model="searchForm" inline label-width="100px" :rules="searchRules">
          <!-- <el-form-item prop="modle_id" label="模型" required>
            <el-select v-model="searchForm.modle_id" placeholder="请选择" disabled @change="moduleChange">
              <el-option
                v-for="item in moduleList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="站点" prop="site_id">
            <el-select v-model="searchForm.site_id" multiple @change="webChange">
              <el-option
                v-for="item in webList"
                :key="item.id"
                :label="item.domain"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="栏目" prop="category_id">
            <el-select v-model="searchForm.category_id" multiple>
              <el-option
                v-for="item in columnList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

        </el-form>
      </div>

      <el-form
        ref="form"
        :model="addForm"
        :rules="rules"
        label-width="130px"
        size="small"
        style="width:100%;"
        class="form"
      >
        <div class="left">
          <h5 class="title"><span /> 基本信息</h5>
          <el-form-item prop="sub_content.title" label="标题:">
            <el-input v-model="addForm.sub_content.title" placeholder="标题" />
          </el-form-item>

          <el-form-item prop="sub_content.description" label="简介:">
            <el-input
              v-model="addForm.sub_content.description"
              placeholder="简介"
              type="textarea"
              :autosize="{ minRows: 4 }"
            />
          </el-form-item>
          <el-form-item label="内容:">
            <div>
              <myTinymce ref="myTinymce" :tinymce-html="tinymceContent" />
            </div>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="addForm.sub_content.tag" multiple>
              <el-option
                v-for="item in tagData"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <div style="width:100%; height:100%">
            <h5 class="title"> <span />  附加信息</h5>
            <publicForm
              ref="publicForm"
              :form-obj="formObj"
              :form-data="formData"
              :second-data="secondData"
              :rules="mainRules"
              @selectChange="selectChange"
              @inputINPUT="inputINPUT"
              @inputChange="inputChange"
              @formSwitchChange="formSwitchChange"
              @buttonClick="buttonClick"
            />
          </div>
        </div>
        <div class="right">
          <h5 class="title"><span /> SEO信息</h5>
          <el-form-item prop="seo_title" label="Title:">
            <el-input v-model="addForm.sub_content.seo_title" placeholder="seo标题" />
          </el-form-item>
          <el-form-item prop="seo_keyword" label="Keyword:">
            <el-input v-model="addForm.sub_content.seo_keyword" placeholder="seo关键词" />
          </el-form-item>
          <el-form-item prop="seo_description" label="Description:">
            <el-input
              v-model="addForm.sub_content.seo_description"
              type="textarea"
              placeholder="seo描述"
              :autosize="{ minRows: 4 }"
            />
          </el-form-item>
          <h5 class="title"><span /> 其他信息</h5>
          <el-form-item prop="author" label="作者:">
            <el-input v-model="addForm.sub_content.author" placeholder="作者" />
          </el-form-item>
          <el-form-item prop="url" label="跳转链接:">
            <el-input v-model="addForm.sub_content.url" placeholder="跳转链接" />
          </el-form-item>
          <el-form-item label="发布时间:" prop="publish_time">
            <el-date-picker
              v-model="addForm.sub_content.publish_time"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
          <el-form-item prop="hits" label="浏览量:">
            <el-input v-model="addForm.sub_content.hits" placeholder="浏览量" />
          </el-form-item>
          <el-form-item prop="sort" label="排序:">
            <el-input v-model="addForm.sub_content.sort" placeholder="排序" />
          </el-form-item>
          <el-form-item prop="status" label="状态:">
            <el-switch
              v-model="addForm.sub_content.status"
              active-text="正常"
              inactive-text="禁用"
              :active-value="1"
              :inactive-value="2"
              active-color="#f84311"
              inactive-color="rgba(0,0,0,0.2)"
            />
          </el-form-item>
          <el-form-item prop="is_top" label="是否置顶:">
            <el-switch
              v-model="addForm.sub_content.is_top"
              active-text="置顶"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
              active-color="#f84311"
              inactive-color="rgba(0,0,0,0.2)"
            />
          </el-form-item>
          <el-form-item prop="is_recommend" label="是否推荐:">
            <el-switch
              v-model="addForm.sub_content.is_recommend"
              active-text="推荐"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
              active-color="#f84311"
              inactive-color="rgba(0,0,0,0.2)"
            />
          </el-form-item>

          <el-form-item size="small" label="缩略图:">
            <div class="attachmentBtn">
              <el-upload
                :headers="myHeaders"
                class="avatar-uploader"
                :action="$store.getters.updateURL+'attachment/uploadAndSave'"
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeAvatarUpload"
                :data="{type:2}"
              >
                <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
              </el-upload>
              <el-button
                size="small"
                class="blue"
                type="primary"
                icon="el-icon-s-unfold"
                @click="openList('thumbnail')"
              >选择附件</el-button>
            </div>
            <div class="imgBox">
              <img v-if="addForm.sub_content.thumbnail" :src="thumbnailImg" class="attachmentImg">
            </div>
            <BouncedDialog title="选择附件" :dialog-show.sync="dialogShow" :width="70" class="attachment">
              <el-table
                v-el-table-infinite-scroll="load"
                :data="attachmentData"
                border
                :header-cell-style="{'text-align':'center','background-color':'#fff'}"
                :cell-style="{'text-align':'center'}"
              >
                <el-table-column label="ID" prop="id" width="60px" />
                <el-table-column label="预览">
                  <template slot-scope="scope">
                    <el-image
                      :src="scope.row.url"
                      alt=""
                      class="attachmentImg"
                      :preview-src-list="scope.row.list"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="文件名" prop="name" show-overflow-tooltip />
                <el-table-column label="文件大小" prop="size" width="100px" show-overflow-tooltip />
                <el-table-column label="Mime类型" prop="mime_type" width="100px" show-overflow-tooltip />
                <el-table-column label="创建日期" prop="create_time" width="160px" show-overflow-tooltip />
                <el-table-column label="操作" width="120px">
                  <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-check" @click="choose(scope.row)">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </BouncedDialog>
          </el-form-item>
          <el-form-item label="详情页banner:">
            <div class="attachmentBtn">
              <el-upload
                :headers="myHeaders"
                class="avatar-uploader"
                :action="$store.getters.updateURL+'attachment/uploadAndSave'"
                :show-file-list="false"
                :on-success="uploadBanner"
                :before-upload="beforeAvatarUpload"
                :data="{type:2}"
              >
                <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
              </el-upload>
              <el-button
                size="small"
                class="blue"
                type="primary"
                icon="el-icon-s-unfold"
                @click="openList('cover')"
              >选择附件</el-button>
            </div>
            <div class="imgBox">
              <img v-if="addForm.sub_content.cover" :src="coverImg" class="attachmentImg">
            </div>
          </el-form-item>
        </div>
      </el-form>

      <br>
      <div class="flexCenter">
        <el-button
          :loading="loading"
          type="primary"
          @click="onSubmit"
        >{{ id?"立即修改":"立即新增" }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
// import mixin from '@/mixins/index'
// import articleApi from '@/api/article'
// import contentApi from '@/api/content'
import columnApi from '@/api/column'
import moduleApi from '@/api/module'

import myTinymce from '@/components/scEditor/'
import { getToken } from '@/utils/auth'
var token = 'Bearer ' + getToken()

import publicForm from './components/updateForms.vue'
import tagApi from '@/api/tag.js'
import attachmentApi from '@/api/system/attachment'
import webApi from '@/api/website'
export default {
  name: 'AddArticle',
  components: { myTinymce, publicForm },
  //   mixins: [mixin],

  data() {
    return {
      attachmentLimit: 10,
      webList: [],
      type: '',
      dialogShow: false,
      attachmentData: [],
      tinymceContent: '',
      secondData: {},
      formObj: [],
      formData: {},
      mainRules: [],
      searchForm: {
        lang: '',
        modle_id: '',
        category_id: '',
        site_id: []
      },
      moduleList: [],
      columnList: [],
      website_id: '',
      myHeaders: { Authorization: token },
      headers: {},
      imageUrl: '',
      imgUrl: this.$store.getters.updateURL,
      checkList: [

      ],
      tindata: '',
      ticShow: false,
      options: [],
      value: '',
      pageLoading: false, // 页面加载
      id: '',
      category_id: '',
      module_id: '',
      loading: false,
      searchRules: {
        // model_id: [
        //   { required: true, message: '请选择模型', trigger: 'change' }
        // ],
        site_id: [
          { required: true, message: '请选择站点', trigger: 'change' }
        ],
        category_id: [
          { required: true, message: '请选择栏目', trigger: 'change' }
        ]
      },
      form: {
        label: '',
        title: '',
        cate_id: '',
        push_time: '',
        image_url: '',
        content: '',
        source: '词爪官方',
        is_hot: 2
        // content1: '', // 富文本原文
        // content2: '' // 富文本html
      },
      rules: {
        sub_content: {
          title: [
            { required: true, message: '请输入文章标题', trigger: 'blur' }
          ]
        },
        main_content: {
          title: [
            { required: true, message: '请输入文章标题', trigger: 'blur' }
          ]
        }
      },
      addForm: {
        module_id: '',
        website_id: '',
        category_id: '',
        // 主表固定字段
        sub_content: {
          tag: '',
          title: '',
          thumbnail: '',
          cover: '',
          hits: '',
          author: '',
          status: '',
          url: '',
          is_top: '',
          is_recommend: '',
          sort: '',
          seo_title: '',
          seo_keyword: '',
          seo_description: '',
          publish_time: ''
        },
        // 副表字段
        main_content: {}
      },
      thumbnailImg: '',
      coverImg: '',
      cate_id: '',
      DATA: '',
      lang: '',
      tagData: [],
      website: '',
      dict: {},
      dictmap: [],
      subObj: {},
      siteIds: [],
      categoryIds: [],
      tags: []
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      // this.siteId = val

      this.website_id = val
      this.getInfo()
      if (value) {
        this.$router.push({ name: 'Content' })
      }
    }
  },
  created() {
    // this.getCateList()
    this.website_id = this.$store.getters.siteId
    // this.siteIds = this.$route.query.siteId
    this.id = this.$route.query.id
    this.lang = this.$route.query.lang
    // this.listenPage()
    if (this.website_id) {
      this.getList()
      this.getInfo()
    }
  },
  mounted() {

  },
  methods: {
    // listenPage() {
    //   window.onbeforeunload = function(e) {
    //     e = e || window.event
    //   }
    // },
    load() {
      this.attachmentLimit += 10
      this.getAttachmentList()
    },
    // 打开附件弹窗
    openList(val) {
      this.type = val
      this.dialogShow = true
      this.getAttachmentList()
    },
    // 附件列表
    getAttachmentList() {
      const val = {
        limit: this.attachmentLimit,
        page: 1,
        type: 2
      }
      attachmentApi.attachmentList(val).then(res => {
        if (res.code == 0) {
          this.attachmentData = res.data
          this.imagelist = []
          // 获取每张图片的地址
          for (var x = 0;x < this.attachmentData.length;x++) {
            this.imagelist.push(this.attachmentData[x].url)
          }
          // 根据图片顺序（index）更改每张图片绑定的list的图片顺序
          for (var i = 0;i < this.attachmentData.length;i++) {
            var container = this.imagelist
            var frontArr = container.slice(0, i)
            var begindArr = container.slice(i, this.attachmentData.length)
            var list = begindArr.concat(frontArr)
            this.attachmentData[i].list = list
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 选择附件
    choose(row) {
      if (this.type == 'thumbnail') {
        //
        this.addForm.sub_content.thumbnail = row.id
        this.thumbnailImg = row.url
      } else if (this.type == 'cover') {
        //
        this.addForm.sub_content.cover = row.id
        this.coverImg = row.url
      }
      this.dialogShow = false
    },
    // 标签列表
    getList() {
      const val = {
        limit: 100,
        page: 1,
        website_id: this.website_id,
        lang: this.lang
      }
      tagApi.tagList(val).then(res => {
        this.tagData = res.data
        // this.addForm.sub_content.tag = this.subContent.tag
      })
    },
    // 获取主副表数据
    getInfo() {
      const val = {
        id: this.id,
        module_id: this.$route.query.module_id,
        website_id: this.website_id,
        lang: this.lang
      }

      columnApi.contentInfo(val).then(res => {
        this.getwebList()
        this.siteIds = res.data.content.website
        this.categoryIds = res.data.content.category
        // for(let key in res.data.field){
        //   this.formData[key]=res.data.filed[key]
        // },
        this.DATA = res.data.content.main_content

        // this.cate_id = res.data.content.category
        this.searchForm.website_id = res.data.content.website
        if (this.$route.query.module_id) {
          this.getModule()
        }
        // 主表内容
        this.addForm.sub_content = {
          title: res.data.content.title,
          description: res.data.content.description,
          tag: res.data.content.tag,
          // content: res.data.content.main_content.content ? this.setTin(res.data.content.main_content.content) : '',
          content: this.setTin(res.data.content.content),
          author: res.data.content.author,
          hits: res.data.content.hits,
          sort: res.data.content.sort,
          url: res.data.content.url,
          status: res.data.content.status,
          publish_time: res.data.content.publish_time,
          is_top: res.data.content.is_top,
          is_recommend: res.data.content.is_recommend,
          seo_title: res.data.content.seo_description,
          seo_keyword: res.data.content.seo_keyword,
          seo_description: res.data.content.seo_description,
          cover: res.data.content.cover ? res.data.content.cover.id : '',
          thumbnail: res.data.content.thumbnail ? res.data.content.thumbnail.id : ''
        }

        this.coverImg = res.data.content.cover != null ? res.data.content.cover.url : ' '
        this.thumbnailImg = res.data.content.thumbnail != null ? res.data.content.thumbnail.url : ' '
        const obj = res.data.field

        const arr = []
        for (const i in obj) {
          arr.push(obj[i])
        }

        // this.formObj = arr
        arr.forEach(el => {
          if (el.form_type == 'image' && res.data.content.main_content[el.table_field]) {
            this.$set(this.formData, el.table_field, res.data.content.main_content[el.table_field].id)
            this.$set(this.secondData, el.table_field, res.data.content.main_content[el.table_field].id)
          } else if (el.form_type == 'richText') {
            this.$refs.publicForm.setTin(res.data.content.main_content[el.table_field])
            // this.formData[el.table_field] = res.data.content.main_content[el.table_field]
            this.$set(this.formData, el.table_field, res.data.content.main_content[el.table_field])
            this.$set(this.secondData, el.table_field, res.data.content.main_content[el.table_field])
          } else if (el.form_type == 'multiImage' && res.data.content.main_content[el.table_field]) {
            this.$set(this.formData, el.table_field, res.data.content.main_content[el.table_field])
            const arr = res.data.content.main_content[el.table_field]
            const arr2 = []
            arr.forEach(item => { arr2.push(item.id) })
            // this.secondData[el.table_field] = arr2
            this.$set(this.secondData, el.table_field, arr2)
          } else {
            this.$set(this.formData, el.table_field, res.data.content.main_content[el.table_field])
            this.$set(this.secondData, el.table_field, res.data.content.main_content[el.table_field])
            // this.formData[el.table_field] = res.data.content.main_content[el.table_field]
            // this.dict[el.table_field] = this.dictmap.length
            // this.dictmap.push(res.data.content.main_content[el.table_field])
            // this.secondData[el.table_field] = res.data.content.main_content[el.table_field]
          }
        })

        // this.formData = this.formData

        this.getSubform()
      })
    },
    // select选择框变化
    selectChange(value, index, prop) {
      this.$forceUpdate()

      this.formData[prop] = value.toString()
    },
    // inpuit变化
    inputINPUT(value, index, prop) {

    },
    // inpuit Change
    inputChange(value, index, prop) {

    },
    // // select 搜索值
    querySelectValue(value, index, prop) {
      const arr = [{
        label: '搜索返回1号',
        value: 1
      }, {
        label: '搜索返回2号',
        value: 2
      }]
      this.searchSelectOptionsCb = arr
    },
    // form表单switch变化
    formSwitchChange(val, index, prop) {

    },
    // 按钮点击
    buttonClick(index, prop) {

    },
    dialogOK() {
      // 判断表单验证是否通过
      // if (this.$refs.publicForm.submitForm()) {
      //   console.log('success')
      //   // console.log(this.formData)
      // } else {
      //   console.log('error')
      // }
    },
    // 获取主副表的字段
    getSubform(formData) {
      this.addForm.module_id = this.searchForm.modle_id
      this.addForm.category_id = this.searchForm.category_id
      this.addForm.website_id = this.website_id
      moduleApi.fieldList({ module_id: this.$route.query.module_id }).then(res => {
        if (res.code == 0) {
          //
          this.formObj = []
          const arr = Object.values(res.data)
          arr.forEach(el => {
            // this.$set(this.formData, el.table_field, '')
            let arr2 = []
            var option = []
            // if (el.validate_rule == 'require') {
            //   el.validate_rule = [{ required: true, message: '此内容为必填内容', trigger: 'blur' }]
            //   if (el.attach_data) {
            //     arr2 = el.attach_data.split(',')
            //     arr2.forEach((el, idx) => {
            //       option.push({
            //         label: el,
            //         value: idx
            //       })
            //     })
            //     const rule = []
            //     this.formObj.push({
            //       [el.form_type]: true,
            //       label: el.form_title,
            //       prop: el.table_field,
            //       rules: el.validate_rule,
            //       options: el.attach_data ? option : [],
            //       list: [],
            //       id: el.id,
            //       type: el.form_type
            //     })
            //   } else {
            //     this.formObj.push({
            //       [el.form_type]: true,
            //       label: el.form_title,
            //       prop: el.table_field,
            //       rules: el.validate_rule,
            //       list: [],
            //       id: el.id,
            //       type: el.form_type
            //     })
            //   }
            // } else
            if (el.validate_rule == 'date' || el.validate_rule == 'time') {
              const rules = [{ required: true, message: '请选择日期/时间', trigger: 'blur' }]
              if (el.attach_data) {
                arr2 = el.attach_data.split(',')
                arr2.forEach((el, idx) => {
                  option.push({
                    label: el,
                    value: idx
                  })
                })
                const rule = []
                this.formObj.push({
                  [el.form_type]: true,
                  label: el.form_title,
                  prop: el.table_field,
                  rules: el.validate_rule == 'require' ? rules : [],
                  options: el.attach_data ? option : [],
                  list: [],
                  id: el.id,
                  type: el.form_type
                })
              } else {
                this.formObj.push({
                  [el.form_type]: true,
                  label: el.form_title,
                  prop: el.table_field,
                  rules: el.validate_rule == 'require' ? rules : [],
                  list: [],
                  id: el.id,
                  type: el.form_type
                })
              }
            } else if (el.validate_rule == 'email') {
              const rules = [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
              if (el.attach_data) {
                arr2 = el.attach_data.split(',')
                arr2.forEach((el, idx) => {
                  option.push({
                    label: el,
                    value: idx
                  })
                })
                const rule = []
                this.formObj.push({
                  [el.form_type]: true,
                  label: el.form_title,
                  prop: el.table_field,
                  rules: el.validate_rule == 'require' ? rules : [],
                  options: el.attach_data ? option : [],
                  list: [],
                  id: el.id,
                  type: el.form_type
                })
              } else {
                this.formObj.push({
                  [el.form_type]: true,
                  label: el.form_title,
                  prop: el.table_field,
                  rules: el.validate_rule == 'require' ? rules : [],
                  list: [],
                  id: el.id,
                  type: el.form_type

                })
              }
            } else if (el.form_type == 'image') {
              const rules = [{ required: true, message: '请上传图片', trigger: 'change' }]
              if (el.attach_data) {
                arr2 = el.attach_data.split(',')
                arr2.forEach((el, idx) => {
                  option.push({
                    label: el,
                    value: idx
                  })
                })
                // const rule = []
                this.formObj.push({
                  [el.form_type]: true,
                  label: el.form_title,
                  prop: el.table_field,
                  rules: el.validate_rule == 'require' ? rules : [],
                  options: el.attach_data ? option : [],
                  list: [],
                  id: el.id,
                  type: el.form_type
                })
              } else {
                this.formObj.push({
                  [el.form_type]: true,
                  label: el.form_title,
                  prop: el.table_field,
                  rules: el.validate_rule == 'require' ? rules : [],
                  list: [],
                  id: this.DATA[el.table_field] ? el.id : '',
                  type: el.form_type,
                  IMGURL: this.DATA[el.table_field] ? this.DATA[el.table_field].url : ''
                })
              }
            } else {
              const rules = [{ required: true, message: '' }]
              if (el.attach_data) {
                arr2 = el.attach_data.split(',')
                arr2.forEach((el, idx) => {
                  option.push({
                    label: el,
                    value: idx
                  })
                })
                const rule = []
                this.formObj.push({
                  [el.form_type]: true,
                  label: el.form_title,
                  prop: el.table_field,
                  rules: el.validate_rule == 'require' ? rules : [],
                  options: el.attach_data ? option : [],
                  list: [],
                  id: el.id,
                  type: el.form_type
                })
              } else {
                this.formObj.push({
                  [el.form_type]: true,
                  label: el.form_title,
                  prop: el.table_field,
                  rules: el.validate_rule == 'require' ? rules : [],
                  list: [],
                  id: el.id,
                  type: el.form_type
                })
              }
            }
          })
          // this.formData = formData

          // formObj.forEach(el => {
          //   this.subObj[el.prop] = ''
          // })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 模型列表
    getModule() {
      moduleApi.moduleList().then(res => {
        this.moduleList = res.data

        this.searchForm.modle_id = this.$route.query.module_id * 1
        // if (this.searchForm.model_id && this.searchForm.site_id) {

        // }
        this.getColumn()
        // this.getSubform(res.data[0].id)
      })
    },
    // 切换模型
    moduleChange(val) {
      //
      this.getColumn(val)
      // this.getSubform(val)
    },
    // 站点列表
    getwebList() {
      webApi.websiteList().then(res => {
        this.webList = res.data
        this.searchForm.site_id = this.siteIds
        if (this.searchForm.model_id && this.searchForm.site_id) {
          this.getColumn()
        }
      })
    },
    webChange(val) {
      this.searchForm.site_id = val

      this.siteIds = val
      this.getColumn()
    },
    // 栏目列表
    getColumn() {
      const val = {
        lang: this.lang,
        model_id: this.$route.query.module_id * 1,
        site_id: this.siteIds
      }
      moduleApi.getModuleCate(val).then(res => {
        if (res.code == 0) {
          this.getTreeData(res.data)
        }
        // this.searchForm.category_id = this.cate_id
        //
      })
    },
    // 递归获取到columnData的数据
    getTreeData(data) {
      const columnArry = []
      for (var i = 0;i < data.length;i++) {
        columnArry.push({ 'id': data[i].id, 'title': data[i].title, 'parent_id': data[i].parent_id })
        if (data[i].children.length > 0) {
          for (var x = 0;x < data[i].children.length;x++) {
            columnArry.push({ 'id': data[i].children[x].id, 'title': data[i].children[x].title, 'parent_id': data[i].children[x].parent_id })
          }
        }
      }
      // 给parent_id!=0 的选项的title前加个标识
      columnArry.forEach(el => {
        if (el.parent_id != 0) {
          this.$set(el, 'title', ' --- ' + el.title)
        }
      })

      this.columnList = columnArry
      this.searchForm.category_id = this.categoryIds
    },
    // 递归将children为空的数组置位undefined
    // getTypeList(arr) {
    //   arr.forEach(el => {
    //     if (el.children.length > 0) {
    //       this.getTypeList(el.children)
    //     } else {
    //       el.children = undefined
    //     }
    //   })
    // },
    // 切换栏目
    handleChange(value) {
      // this.addForm.cate_id = value[value.length - 1]
      this.searchForm.category_id = value[value.length - 1]
    },
    changeTime(val) {
      //
      this.form.push_time = val
    },
    uploadBanner(res) {
      if (res.code == 0) {
        this.addForm.sub_content.cover = res.data.id
        this.coverImg = res.data.url
      }
    },
    // 封面照片上传成功
    handleSuccess(res, file, fileList) {
      if (res.code == -200 || res.code == 0) {
        this.addForm.sub_content.thumbnail = res.data.id
        this.thumbnailImg = res.data.url
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return (isJPG || isPNG) && isLt2M
    },
    // 提交按钮
    onSubmit() {
      // for (const key in this.dict) {
      //   this.formData[key] = this.dictmap[this.dict[key]]
      // }
      this.addForm.sub_content.content = this.getTin()

      // 判断rules

      this.$refs.publicForm.getTin()
      // return
      this.$refs.form.validate((valid) => {
        // this.$refs.publicForm.validateFieldProp((subValid) => {
        if (valid) {
          const val = {
            module_id: this.searchForm.modle_id,
            category_id: this.searchForm.category_id,
            sub_content: this.addForm.sub_content,
            id: this.id
          }

          this.formObj.forEach(el => {
            if (el.type == 'multiImage' || el.type == 'multiFile' || el.type == 'multiVideo') {
              this.formData[el.prop].forEach((item, index) => {
                this.formData[el.prop][index] = parseInt(item.id)
              })
            }
          })

          // return
          if (JSON.stringify(this.formData) == '{}') {
            val.main_content = {
              id: this.DATA.id,
              lang: this.DATA.lang,
              lang_pid: this.DATA.lang_pid,
              sub_id: this.DATA.sub_id
            }
          } else {
            // val.main_content = this.$refs.publicForm.status ? this.formData : this.secondData
            val.main_content = this.formData
          }

          this.loading = true
          columnApi.contentUpdate(val).then((res) => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              // this.$router.push({ name: 'Content' })
            } else {
              this.$message.error(res.msg)
            }
            this.loading = false
          })
          this.loading = false
        } else {
          this.$message.warning('请填写必要信息')
        }
        // })
      })
    },

    // 获取富文本框内容
    getTin() {
      var rs = this.$refs.myTinymce.value
      return rs
    },
    // 设置富文本框内容
    setTin(v) {
      this.$refs.myTinymce.value = v
    },
    // 返回上一页
    prev() {
      this.$router.push({ name: 'Content' })
    }
  }
}
</script>

<style lang='scss'>
#addContent{
  .el-select, .el-input, .el-textarea, .el-date-editor{
    width: 100%;
  }
}
.attachment .el-dialog{
  height: 640px;
}

</style>
<style  scoped lang="scss">
.form{
  display: flex;
  justify-content: space-between;
}
.left{
  width: 65%;
}
.right{
  width: 33%;
}
.container{
  margin-bottom: 40px;
h5.title{
  height: 40px;
  line-height: 40px;
  border-left: solid 4px #f84311;
  background-color: #f5f5f5;
  font-size: 15px;
  color: #555;
  padding-left: 20px;
  margin-bottom: 20px;
}
}

.search{
  min-width: 1350px;
  background-color: #fff;
  padding: 15px 20px 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.avatar{
  height: 100px;
}
.card{
  position: relative;
}
.back{
  position: absolute;
  right: 43px;
  top: 43px;
  z-index: 9;
}

  // .form_ipt {
  //   width: 100%;
  // }

  .flexCenter {
    margin-top: 15px;
    padding-left: 120px;
    margin-bottom: 20px;
  }
  .warin {
    margin-left: 40px;
    color: rgb(230, 162, 60);
  }
@media screen and (max-width:1380px){
  .el-card{
    min-width: 980px;
  }
  .form{
    display: block;
  }
  .left{
    width: 100%;
  }
  .right{
    width: 100%;
  }
  .back{
    top: 24px;
  }
}
</style>
